<!--
  日历弹出框组件              zls-2022/06/05
      Attributes
          1、input公共组件的部分属性
          其他所有属性均参考vant组件库中的  "Calendar 日历"

      Events
          1、confirm        弹出框的确认按钮

      Demo==>
          请参考 Form 表单组件
-->

<template>
  <div class="z-calendar">
    <z-input
      :label="$attrs.label"
      :modelValue="inputValue"
      :labelWidth="$attrs['labelWidth']"
      :placeholder="$attrs.placeholder || '请选择'"
      :svg="$attrs.svg || 'jiantou'"
      readonly
      clickable
      @click="show = true"
      @input="input"
    ></z-input>
    <Calendar
      v-model:show="show"
      :type="$attrs['type']"
      :title="$attrs['title']"
      :min-date="$attrs['min-date'] || minDate"
      :max-date="$attrs['max-date'] || maxDate"
      :default-date="$attrs['default-date']"
      :row-height="$attrs['row-height']"
      :formatter="$attrs['formatter']"
      :show-confirm="$attrs['show-confirm']"
      :readonly="$attrs['readonly']"
      :first-day-of-week="$attrs['first-day-of-week']"
      :position="$attrs['position']"
      :max-range="$attrs['max-range']"
      :range-prompt="$attrs['range-prompt']"
      :allow-same-day="$attrs['allow-same-day']"
      @confirm="confirm"
    />
  </div>
</template>

<script>
export default { name: 'z-calendar' }
</script>
<script setup>
import { ref, useAttrs, inject, getCurrentInstance, watch } from 'vue'
import { Calendar } from 'vant'
import $day from 'dayjs'
const attrs = useAttrs()
const global = getCurrentInstance().appContext.config.globalProperties
const formItem = inject('formItem')
const emit = defineEmits(['confirm', 'update:modelValue'])

const show = ref(false) // 是否弹出
const minDate = ref(new Date($day().subtract(5, 'year'))) // 最大时间为5年前
const maxDate = ref(new Date($day().add(5, 'year'))) // 最大时间为5年后
const inputValue = ref('') // 当前时间(input框使用)

watch(
  () => attrs.modelValue,
  newVal => {
    inputValue.value = newVal
  },
  { immediate: true, deep: true }
)

// 实时改变
function input() {
  show.value = false
  let value = attrs.type === 'single' ? '' : null
  emit('update:modelValue', value)
  emit('confirm', value)
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function confirm(value) {
  show.value = false
  const time = attrs.type === 'single' ? $day(value).format('YYYY-MM-DD') : value.map(v => $day(v).format('YYYY-MM-DD'))
  emit('update:modelValue', time)
  emit('confirm', time)
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}
</script>
